<template>
  <div class="base-actionbar">

    <div class="slot-prepend">
      <!-- @slot 操作栏前部 -->
      <slot name="prepend" />
    </div>

    <div class="actionbar-actions">
      <template v-for="(action, i) in actionList">
        <template v-if="action.isBadge&&(action.badgeAttrs&&action.badgeAttrs.value)">
          <el-badge :key="i" v-bind="action.badgeAttrs">
            <el-button
              :key="i"
              :size="action.size||size"
              :type="action.type||'primary'"
              @click="onClick(action)">
              {{action.label}}
            </el-button>
          </el-badge>
        </template>
        <template v-else>
          <el-button
            :key="i"
            :size="action.size||size"
            :type="action.type||'primary'"
            @click="onClick(action)">
            {{action.label}}
          </el-button>
        </template>
      </template>
      <el-dropdown class="actions-more" trigger="click" v-if="actionMore.length">
        <el-button :size="size" type="primary" icon="el-icon-more">
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(action,i) in actionMore" :key="i">
              <span @click="onClick(action)">{{action.label}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <div class="slot-append">
      <!-- @slot 操作栏尾部 -->
      <slot name="append" />
    </div>

  </div>
</template>
<script>
/**
 * 通用操作栏（后续看情况是否设计为插槽模式）
 */
export default {
  name: 'base-actionbar',
  data () {
    return {}
  },
  props: {
    /**
     * 操作栏按钮配置
     * @type {Array<Action>}
     * @interface
     * Action {
     *   label: '按钮名称' | String,
     *   value: '按钮值 / 用于权限过滤' | String,
     *   type: 'el组件属性' | String,
     *   event: '回调函数' | Function
     * }
     */
    actions: {
      type: Array,
      default: () => []
    },
    /**
     * 按钮尺寸
     * @type {String}
     */
    size: {
      type: String,
      default: 'small'
    },
    /**
     * 按钮数量配置，超出部分用下拉菜单方式展示
     * @type {Number}
     */
    limit: {
      type: Number,
      default: 7
    },
    /**
     * 执行上下文
     * @type {Object}
     */
    context: Object
  },
  computed: {
    data () {
      const data = [].concat(this.actions)
      return data.sort((a, b) => {
        return a.sort - b.sort
      })
    },
    actionList () {
      return this.data.filter((a, i) => i < this.limit)
    },
    actionMore () {
      return this.data.filter((a, i) => i >= this.limit)
    }
  },
  methods: {
    onClick (action) {
      const event = action.event
      // 每个控件可自定义上线文，没有定义用全局的上下文
      const context = action.context || this.context || this
      if (context[event] && typeof context[event] === 'function') {
        context[event](action)
      } else if (typeof event === 'function') {
        event.call(context, action)
      } else if (event[0] === '@') {
        context.$emit(event.substring(1), action)
      }
    }
  }
}
</script>
<style lang="scss">
.base-actionbar {
  display: flex;
  //border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
  min-height: 48px;
  .actionbar-actions {
    display: flex;
    align-items: center;
    .el-button:last-child {
      margin-right: 10px;
    }
    .el-badge {
      margin-right: 10px;
    }
    .el-badge__content {
      height: 16px;
      line-height: 16px;
      &.is-fixed {
        top: 2px;
        right: 23px;
      }
    }
  }
  .slot-prepend {
    display: flex;
    align-items: center;
  }
  .slot-append {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .actions-more {
    margin-right: 10px;
  }
  .el-button {
    margin-left: 0;
    margin-right: 10px;
  }
}
</style>
